<template>
  <div id="after_sale">
    <div class="container">
      <div class="af_main">
        <ul>
          <li>关于我们</li>
          <li><a href="#">关于OPPO</a></li>
          <li><a href="#">新闻中心</a></li>
          <li><a href="#">人才招聘</a></li>
        </ul>
        <ul>
          <li>推荐机型</li>
          <li><a href="#">N3</a></li>
          <li><a href="#">R5</a></li>
          <li><a href="#">R1C</a></li>
          <li><a href="#">Find 7</a></li>
        </ul>
        <ul>
          <li>购物相关</li>
          <li><a href="#">帮助中心</a></li>
          <li><a href="#">周边产品</a></li>
          <li><a href="#">OPPO体验店</a></li>
          <li><a href="#">客户服务政策</a></li>
        </ul>
        <ul>
          <li>会员中心</li>
          <li><a href="#">产品注册</a></li>
          <li><a href="#">会员注册</a></li>
          <li><a href="#">会员登录</a></li>
        </ul>
        <ul>
          <li>关注我们</li>
          <li><a href="#"><span class="weibo1"></span>新浪微博</a></li>
          <li><a href="#"><span class="tx1"></span>腾讯微博</a></li>
          <li><a href="#"><span class="renren"></span>人人网</a></li>
          <li><a href="#"><span class="kongjian"></span>QQ空间</a></li>
        </ul>
        <ul>
          <li>联系我们</li>
          <li><span class="tel1"></span><p class="big">4001-666-888</p></li>
          <li><p class="small">24小时客服电话</p></li>
          <li><span class="kefu"></span><p class="big">在线客服</p></li>
          <li><p class="small">服务时段：8:30-22:00</p></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
  #after_sale {
    height: 200px;
    font-size: 15px;
  }

  #after_sale a {
    text-decoration: none;
    color: inherit;
  }

  #after_sale .af_main {
    width: 1225px;
    margin: 10px auto;
  }

  #after_sale ul {
    margin: 20px 60px 40px 60px;
    text-align: center;
    float: left;
  }

  #after_sale ul:nth-child(5) {
    margin-right: 0px;
    text-align: left;
  }

  #after_sale ul:last-child {
    width: 175px;
  }

  #after_sale ul li:first-child {
    font-weight: bold;
  }

  #after_sale .af_main li {
    margin: 10px 0px;
    color: #666666;
  }

  #after_sale .af_main li span.weibo1 {
    width: 20px;
    height: 16px;
    margin-right: 5px;
    background-image: url("~@/images/afterSale/icons.png");
    background-position: -47px -95px;
    display: inline-block;
    vertical-align: middle;
  }

  #after_sale .af_main li span.tx1 {
    width: 15px;
    height: 20px;
    margin-right: 10px;
    background-image: url("~@/images/afterSale/icons.png");
    background-position: -27px -92px;
    display: inline-block;
    vertical-align: middle;
  }

  #after_sale .af_main li span.renren {
    width: 18px;
    height: 16px;
    margin-right: 7px;
    background-image: url("~@/images/afterSale/icons-1.png");
    background-position: -2px -940px;
    display: inline-block;
    vertical-align: middle;
  }
  
  #after_sale .af_main li span.kongjian {
    width: 20px;
    height: 18px;
    margin-right: 5px;
    background-image: url("~@/images/afterSale/icons-1.png");
    background-position: 0px -854px;
    display: inline-block;
    vertical-align: middle;
  }

  #after_sale .af_main ul:nth-child(5) li:nth-child(2) a:hover span {
    background: url("~@/images/afterSale/icons-1.png") no-repeat -145px -882px;
  }

  #after_sale .af_main ul:nth-child(5) li:nth-child(3) a:hover span {
    background: url("~@/images/afterSale/icons-1.png") no-repeat -147px -910px;
  }

  #after_sale .af_main ul:nth-child(5) li:nth-child(4) a:hover span {
    background: url("~@/images/afterSale/icons-1.png") no-repeat -146px -940px;
  }

  #after_sale .af_main ul:nth-child(5) li:last-child a:hover span {
    background: url("~@/images/afterSale/icons-1.png") no-repeat -144px -854px;
  }

  #after_sale .af_main li span.tel1 {
    width: 29px;
    height: 28px;
    margin-right: 7px;
    background-image: url("~@/images/afterSale/icons.png");
    background-position: -1px -2px;
    float: left;
  }

  #after_sale .af_main li span.kefu {
    width: 29px;
    height: 28px;
    margin-right: -30px;
    background-image: url("~@/images/afterSale/icons.png");
    background-position: -41px -2px;
    float: left;
  }

  #after_sale .af_main li p.big {
    color: #369f6f;
    font-size: 20px;
  }

  #after_sale .af_main li p.small {
    font-size: 12px;
  }

  #after_sale .af_main a:hover {
    color: #00925f;
  }
</style>